.el-switch {
  display: inline-block;
  position: relative;
  font-size: 12px;
  vertical-align: middle;
}

.el-switch__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}

.el-switch__core {
  margin: 0;
  display: inline-block;
  position: relative;
  width: 42px;
  height: 22px;
  border: 1px solid #cdcdcd;
  outline: none;
  @include border-radius(11px);
  background-color: #cdcdcd;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
  vertical-align: top;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    transition: all 0.3s;
    width: 20px;
    height: 20px;
    background-color: $white;
  }
}

.el-switch.is-checked {
  .el-switch__core {
    border-color: #67c23a;
    background-color: #67c23a;

    &::after {
      left: 100%;
      margin-left: -20px;
    }
  }
}

.el-switch.el-switch--medium {
  line-height: 18px;

  .el-switch__core {
    width: 38px;
    height: 20px;
    &::after {
      width: 18px;
      height: 18px;
    }
  }

  &.is-checked {
    .el-switch__core::after {
      margin-left: -18px;
    }
  }
}


.el-switch.el-switch--small {
  line-height: 16px;

  .el-switch__core {
    width: 34px;
    height: 18px;
    &::after {
      width: 16px;
      height: 16px;
    }
  }

  &.is-checked {
    .el-switch__core::after {
      margin-left: -16px;
    }
  }
}

